<template>
  <el-button type="success" @click="dialogFormVisible = true">
    添加管理员
  </el-button>

  <el-dialog v-model="dialogFormVisible" title="添加管理员">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="角色" prop="roleId">
        <el-select
          v-model="ruleForm.roleId"
          placeholder="请选择角色"
          @change="handleChange"
        >
          <el-option
            v-for="item in roleData"
            :label="item.roleName"
            :value="item.objectId"
          />
        </el-select>
        <span style="color: #999"
          ><i style="color: red">&nbsp;&nbsp;*</i>&nbsp;管理员必填</span
        >
      </el-form-item>
      <el-form-item label="校区" prop="schoolName">
        <el-select v-model="ruleForm.schoolName" placeholder="请选择所属校区">
          <el-option
            v-for="item in schoolData"
            :label="item.schoolName"
            :value="item.schoolName"
          />
        </el-select>
        <span style="color: #999"
          ><i style="color: red">&nbsp;&nbsp;*</i>&nbsp;员工校区必填</span
        >
      </el-form-item>
      <el-form-item label="登录账号" prop="username">
        <el-input v-model="ruleForm.username" />
        <span style="color: #999"
          ><i style="color: red">&nbsp;&nbsp;*</i
          >&nbsp;将会成为您唯一的登入名</span
        >
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="ruleForm.password" />
        <span style="color: #999"
          ><i style="color: red">&nbsp;&nbsp;*</i>&nbsp;初始密码：123</span
        >
      </el-form-item>

      <el-form-item label="管理员姓名" prop="managerName">
        <el-input type="text" v-model="ruleForm.managerName" />
      </el-form-item>
      <el-form-item label="联系电话" prop="tel">
        <el-input type="text" v-model="ruleForm.tel" />
      </el-form-item>
      <!-- <el-form-item label="角色Id" prop="tel">
                <el-input type="text" v-model="ruleForm.roleId" />
            </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          提交
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>


<script lang="ts" setup>
import { reactive, ref } from "vue";

const dialogFormVisible = ref(false);
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { roleGet, schoolNameGet } from "../../../api/role";
import { usersPost } from "../../../api/user";
interface RuleForm {
  roleName: string;
  schoolName: string;
  username: string;
  password: string;
  managerName: string;
  tel: string;
  roleId: string;
  open: boolean;
}

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  roleName: "",
  schoolName: "",
  username: "",
  password: "123",
  managerName: "",
  tel: "",
  roleId: "",
  open: false,
});
const rules = reactive<FormRules<RuleForm>>({
  roleName: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
  ],
  schoolName: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change",
    },
  ],
  password: [{ required: true, trigger: "blur" }],
  managerName: [{ required: true, message: "真实姓名", trigger: "blur" }],

  tel: [{ required: true, trigger: "blur" }],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!", ruleForm);
      usersPost(ruleForm).then(() => {
        ElMessage({
          showClose: true,
          message: "新增成功",
          type: "success",
        });
      });
      // usersPost(ruleForm).then(() => {

      // })
    } else {
      console.log("error submit!", fields);
      ElMessage({
        showClose: true,
        message: "新增失败",
        type: "error",
      });
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
const handleChange = (value: string) => {
  console.log("value:", value);
  ruleForm.roleId = value;
  roleGet(value).then((res) => {
    ruleForm.roleName = res.data.roleName;
    ruleForm.open = res.data.open;
    console.log(res);
  });
};

interface RoleType {
  objectId: string;
  permission: Array<any[]>;
  roleName: string;
  schoolName: string;
  roleId: string;
}
const roleData = ref<Array<RoleType>>([])
const schoolData = ref<any>([])
roleGet().then((res) => {
  roleData.value = res.data.results;
});
schoolNameGet().then((res) => {
  schoolData.value = res.data.results;
});
</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.el-input {
  width: 218px;
}
</style>